<template>
  <div class="case">
    <NavBar title="案件补充" left-text="" :left-arrow="false" />
    <Form @submit="onSubmit">
      <h2 class="form-title">再次提交信息</h2>

      <Field name="uploader" label="资料上传">
        <template #input>
          <Uploader
            v-model="accidentFilesfileList"
            :max-count="10"
            :max-size="5 * 1024 * 1024"
            :after-read="afterRead"
            @delete="onDelete"
          />
        </template>
      </Field>
      <div style="margin: 16px;">
        <Button round block type="info" native-type="submit">提交</Button>
      </div>
    </Form>
    <div style="margin: 16px;">
      <Button
        round
        block
        type="info"
        native-type="submit"
        @click="onCheck"
      >查看进度</Button>
    </div>
    <!-- 案件进度信息 -->
    <CellGroup v-if="applySpeedChecked" title="案件最新进度">
      <Cell title="案件状态" :value="applySpeed.speed" />
      <Cell title="沟通内容" value="" :label="applySpeed.content" />
      <Cell title="赔付金额" :value="applySpeed.amount" />
    </CellGroup>
    <!-- 查看进度弹窗 -->
    <Overlay :show="show" @click="show = false">
      <div class="overlay-wrapper" @click.stop>
        <div class="overlay">
          <!--  -->
          <div class="overlay-title">查看进度</div>
          <Field
            v-model="phoneNum"
            name="手机号"
            label=""
            label-width="0"
            type="tel"
            clearable
            placeholder="请输入手机号查询"
            class="phone-field"
          />
          <Button
            :disabled="!phoneNum && !phoneNum.trim()"
            round
            block
            type="info"
            native-type="submit"
            @click="onCheck"
          >查看</Button>
        </div>
      </div>
    </Overlay>
  </div>
</template>

<script>
import {
  Button,
  NavBar,
  Form,
  Field,
  Uploader,
  CellGroup,
  Cell,
  Overlay,
  Notify
} from 'vant'
import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
import { userApplyReplenish, userApplySpeed } from '@/api/insurance/case'

export default {
  name: 'ReplenishCaseH5',
  components: {
    Button,
    NavBar,
    Form,
    Field,
    Uploader,
    CellGroup,
    Cell,
    Overlay,
    [Notify.Component.name]: Notify.Component
  },
  data: () => {
    return {
      formData: {},
      applySpeed: {},
      show: false,
      phoneNum: '',
      accidentFilesfileList: [],
      applySpeedChecked: false
    }
  },
  computed: {
    ...mapGetters(['imagesUploadApi', 'baseApi'])
  },
  created() {},
  methods: {
    onSubmit() {
      const { accidentFilesfileList } = this.formData
      if (!accidentFilesfileList || !accidentFilesfileList.length) {
        Notify({ type: 'warning', message: '请上传资料' })
      } else {
        userApplyReplenish({
          docs: this.formData.accidentFilesfileList,
          id: this.$route.query.id
        })
      }
    },
    onCheck() {
      // const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
      // if (!reg.test(this.phoneNum)) {
      //   Notify({ type: 'warning', message: '请输入正确的手机号' })
      // } else {
      //   // 发起请求
      //   this.show = false
      // }
      userApplySpeed({ id: this.$route.query.id }).then(res => {
        this.applySpeedChecked = true
        this.applySpeed = res
      })
    },
    afterRead({ file }) {
      file.status = 'uploading'
      file.message = '上传中...'
      upload(this.imagesUploadApi, file)
        .then(res => {
          const data = res.data
          const url = this.baseApi + '/file/' + data.type + '/' + data.realName
          console.log(url)
          file.status = 'done'
          file.message = '上传成功'
          this.formData.accidentFilesfileList =
            this.formData.accidentFilesfileList || []
          this.formData.accidentFilesfileList.push(data.realName)
        })
        .catch(() => {
          file.status = 'failed'
          file.message = '上传失败'
        })
    },
    onDelete({ file }) {
      const index = this.formData.accidentFilesfileList.indexOf(file.name)
      this.formData.accidentFilesfileList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.case {
  background-color: #fafafa;
}
.form-title {
  margin: 0;
  padding: 16px;
  color: rgba(69, 90, 100, 0.6);
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
}

.overlay {
  width: 80%;
  min-height: 120px;
  background-color: #fff;
  padding: 20px 32px;
  border-radius: 5px;
  &-title {
    font-weight: 500;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  &-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .phone-field {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
  }
}
</style>
